<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link rel="stylesheet" href="../../../static/layer/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../../../static/css/font-awesome.min.css" media="all">
    <style>
        .layui-form-switch {
            width: 54px;
            margin-top: 0;
        }

        .layui-form-switch i {
            top: 2px;
        }
    </style>
</head>
<body>
<div style="padding: 20px; position: relative;">
    <div class="operateTable">
        名称：
        <div class="layui-inline">
            <input class="layui-input" name="id" id="filter-id" placeholder="请输入关键字" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    </div>
    <div class="operateTable" style="position: absolute; top: 20px; right: 20px;">
        <button class="layui-btn" data-type="addwy"><i class="layui-icon"></i> 新增物业</button>
    </div>
    <table class="layui-table"
           lay-data="{height:'full-80', url:'/property/listProperty/',page:true, limit:20, id:'wyxzTable'}"
           lay-filter="wyxz">
        <thead>
        <tr>
            <th lay-data="{checkbox:true, fixed: true}"></th>
            <!--<th lay-data="{field:'ID', width:150}">ID</th>-->
            <th lay-data="{field:'CODE', width:200}">名称</th>
            <!--<th lay-data="{field:'CHARGE_TYPES', width:100}">收费类型</th>
            <th lay-data="{field:'CHARGE_DATES', width:250}">收费日期</th>-->
            <th lay-data="{field:'INFO', width:300}">备注</th>
            <th lay-data="{field:'NAME', width:150}">创建人</th>
            <th lay-data="{field:'CREATE_DATE', width:200, align:'center'}">创建时间</th>
            <th lay-data="{field:'IS_OPEN', templet:'#statusTpl', width:150, align:'center'}">是否开启</th>
            <th lay-data="{fixed: 'right', width:250, align:'center', toolbar: '#barDemo'}">操作</th>
        </tr>
        </thead>
    </table>
    <script type="text/html" id="barDemo">
        {{# var type = d.ID }}
        {{# if (type != 'a14e6f2e190e4492badac72e9b42152e' && type != 'ddcf9b35bbe04cd88834e21c1fd74f32' && type != '669791dac4894160bc8d79b484519e96' && type != '7b05982a081e41deb9b46a1f6f5ed5fa'){ }}
        <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
        {{# } else{ }}
        <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
        {{# } }}
    </script>
</div>

<script type="text/javascript" src="../../../static/layer/layui.js"></script>
<script>
    var table;
    layui.use(['jquery', 'table', 'form', 'layer'], function () {
        table = layui.table;
        var form = layui.form;
        //监听表格复选框选择
        table.on('checkbox(wyxz)', function (obj) {
            console.log(obj)
        });
        //监听工具条
        table.on('tool(wyxz)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.open({
                    type: 2,
                    title: data.CODE,
                    shadeClose: false,
                    shade: [0.3],
                    maxmin: true, //开启最大化最小化按钮
                    area: ['900px', '90%'],
                    scrollbar: false, //屏蔽滚动条
                    content: 'contract_adds.html?type=view&id=' + data.ID
                });
            } else if (obj.event === 'del') {
                layer.confirm('确认删除 ' + data.CODE + ' 吗', {offset: '150px'}, function (index) {
//                    obj.del();
                    layer.close(index);
                    if (data.ID == '669791dac4894160bc8d79b484519e96' || data.ID == '7b05982a081e41deb9b46a1f6f5ed5fa') {
                        layer.msg(data.CODE + " 不能删除", {offset: '150px'});
                    } else {
                        $.ajax({
                            url: "/property/edit",
                            data: {ID: data.ID, IS_DEL: 1},
                            dataType: "json",
                            type: "post",
                            async: false,
                            success: function (res) {
                                if (res.errcode === "0") {
                                    reload();    // 表格刷新
                                    layer.msg(data.CODE + " 已删除", {offset: '150px'});   // 弹出删除成功
                                } else if (res.errcode === "1") {
                                    layer.msg(res.errmsg, function () {
                                    });
                                }
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                console.error(XMLHttpRequest.status);
                                console.error(XMLHttpRequest.readyState);
                                console.error(textStatus);
                            }
                        });
                    }
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 2,
                    title: "编辑 " + data.CODE,
                    shadeClose: false,
                    shade: [0.3],
                    maxmin: true, //开启最大化最小化按钮
                    area: ['900px', '90%'],
                    scrollbar: false, //屏蔽滚动条
                    content: 'contract_adds.html?type=edit&id=' + data.ID
                });
            }
        });

        var $ = layui.$, active = {
            getCheckData: function () { //获取选中数据
                var checkStatus = table.checkStatus('wyxzTable')
                    , data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            , getCheckLength: function () { //获取选中数目
                var checkStatus = table.checkStatus('wyxzTable')
                    , data = checkStatus.data;
                layer.msg('选中了：' + data.length + ' 个');
            }
            , isAll: function () { //验证是否全选
                var checkStatus = table.checkStatus('wyxzTable');
                layer.msg(checkStatus.isAll ? '全选' : '未全选')
            }
            , reload: function () {
                var name = $('#filter-id').val();
                table.reload('wyxzTable', {
                    where: {
                        KEYWORDS: name
                    }
                });
            }
            , addwy: function () {
                layer.open({
                    type: 2,
                    title: '新增物业',
                    shadeClose: false,
                    shade: [0.3],
                    maxmin: true, //开启最大化最小化按钮
                    area: ['900px', '90%'],
                    scrollbar: false, //屏蔽滚动条
                    content: 'contract_adds.html?type=add'
                });
            }
        };

        $('.operateTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            var ID = data.othis.parent().find("input[name='IS_OPEN']").val();
            var name = data.othis.parent().find("input[name='IS_OPEN']").data("name");
            var open = "on";
            if (this.checked === true) {
                open = "on";
            } else if (this.checked === false) {
                open = "off";
            }
            $.ajax({
                url: "/property/editPropertySet",
                data: {ID: ID, IS_OPEN: open},
                dataType: "json",
                type: "post",
                async: false,
                success: function (res) {
                    if (res.errcode === "0") {
                        reload();    // 表格刷新
                        if (open === "on") {
                            layer.msg(name + ' 已启用', {offset: '150px'});
                        } else if (open === "off") {
                            layer.msg(name + ' 已关闭', {offset: '150px'});
                        }
                    } else if (res.errcode === "1") {
                        layer.msg(res.errmsg, function () {
                        });
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.error(XMLHttpRequest.status);
                    console.error(XMLHttpRequest.readyState);
                    console.error(textStatus);
                }
            });
        });
    });

    function reload() {
        table.reload('wyxzTable', {});
    }
</script>
<script type="text/html" id="statusTpl">
    {{# var status=d.IS_OPEN }}
    {{# var id=d.ID }}
    {{# var name=d.CODE }}
    {{# if (id != 'a14e6f2e190e4492badac72e9b42152e' && id != 'ddcf9b35bbe04cd88834e21c1fd74f32' && id != '669791dac4894160bc8d79b484519e96' && id != '7b05982a081e41deb9b46a1f6f5ed5fa'){ }}
    {{# if (status=='on'){ }}
    <input type="checkbox" checked="" value="{{id}}" data-name="{{name}}" name="IS_OPEN" lay-skin="switch"
           lay-filter="switchTest" lay-text="启用|关闭">
    {{# } else{ }}
    <input type="checkbox" value="{{id}}" data-name="{{name}}" name="IS_OPEN" lay-skin="switch" lay-filter="switchTest"
           lay-text="启用|关闭">
    {{# } }}
    {{# } else{ }}
    <span>启用</span>
    {{# } }}
</script>
</body>
</html>